<template>
	<view>
		<view class="content_user">
			<view class="info"><text>订单号</text><text style="margin-left: 70rpx;">{{order.orderNo}}</text></view>
			<view class="info center">退款金额<text style="margin-left: 40rpx;color: #C58079;">{{order.money}}元</text>
			</view>
			<view class="last">退还方式<text style="margin-left: 40rpx;">原路返回</text><text
					style="color: #E28634;">（1-3个工作日内退款到原支付方）</text></view>

		</view>
		<view class="content">
			<view class="content_1">
				退款原因
			</view>

			<view class="content_2">
				<up-radio-group v-model="form.reason" placement="column" @change="groupChange">
					<up-radio activeColor="red" :customStyle="{marginBottom: '20rpx',fontSize:'28rpx'}" v-for="(item, index) in items"
						:key="index" :label="item.value" :name="item.value" @change="onRadioChange">
					</up-radio>
				</up-radio-group>
			</view>
			<view class="content_3">
				<up-textarea v-model="form.reason" placeholder="都不是？请告诉我们其他原因？" count></up-textarea>


			</view>
		</view>
		<view class="footer">
			<up-button type="primary" color="linear-gradient(to right, rgb(216, 0, 0), rgb(213, 90, 2))"
				:loading="loading" @click="ontuikuan" text="申请退款"></up-button>

		</view>
		<view style="height: 120rpx;line-height: 120rpx;"></view>
	</view>
</template>

<script>
	import {
		orderRefundApi,
		 orderDetialApi,
	} from '@/api/order.js'
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	export default {
		setup() {
			const state = reactive({
				items: [{
						value: '预约不上',
						name: '预约不上',
						checked: 'true'
					},
					{
						value: '朋友/网上评价不好',
						name: '朋友/网上评价不好'
					},
					{
						value: '买多了/买错了',
						name: '买多了/买错了'
					},
					{
						value: '计划有变，没时间消费',
						name: '计划有变，没时间消费'
					},
					{
						value: '后悔了，不想要了',
						name: '后悔了，不想要了'
					},
					{
						value: '去过了，不太满意',
						name: '去过了，不太满意'
					},
					{
						value: '联系不上商家',
						name: '联系不上商家'
					},
				],
				form: {
					orderNo: null,
					reason: '',
					other: ','
				},
				current: 0,
				orderNo: "",
				order: {},
				loading: false,
			})
			onLoad(async (res) => {
				state.orderNo = res.orderNo

				await getData()


			})



			const getData = async () => {
				const {
					data
				} = await orderDetialApi(state.orderNo)
				state.order = data
			}

			function onRadioChange(evt) {
				console.log(evt)
			}
			const ontuikuan = async () => {
				state.loading = true
				try {
					await orderRefundApi({
						orderNo: state.order.orderNo
					})
					uni.$u.toast("请等待1-3个工作日,将退款到原支付方！");
					uni.reLaunch({
						url:"/pages/index/index"
					})
				} catch {
					state.loading = false
				}
			}
			return {
				...toRefs(state),
				getData,
				onRadioChange,
				ontuikuan
			}
		}
	}
</script>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style scoped lang="scss">
	.content_user {
		font-size: 28rpx;
		padding: 20rpx 40rpx;
		background-color: #fff;

		.info {
			border-bottom: 1rpx solid #eee;
			padding-bottom: 20rpx;
		}

		.center {
			margin-top: 20rpx;
		}

		.last {
			margin-top: 20rpx;
		}
	}

	.content {
		margin-top: 40rpx;
		padding: 20rpx 40rpx;
		background-color: #fff;

		.content_1 {
			font-weight: 550;
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}

		.content_2 {
			.list-cell {
				margin-top: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #F6F6F6;
			}
		}

		.content_3 {
			margin: 40rpx 0;

			textarea {
				background-color: #F6F6F6;
				border-radius: 10rpx;
				padding: 10rpx 0 0 10rpx;
				width: 100%;
				height: 200rpx;
			}
		}
	}

	.footer {
		font-size: 22rpx;
		padding: 20rpx;
		position: fixed;
		display: flex;
		/* 固定定位 */
		bottom: 0;
		left: 0;
		/* 底部对齐 */
		width: calc(100% - 40rpx);
		/* 宽度100% */
		/* 使用Flex布局 */
		height: 100rpx;
		background-color: #fff;
	
	}
</style>